<template>
  <CategoryInfo :col="R1Info" :datas="carChart"></CategoryInfo>
  <div ref="R1Chart" class="chart"/>
</template>

<script setup>
import {onMounted, reactive} from "@vue/runtime-core";
import {CarChartApi} from "@/common/customs/overview";
import {ref} from "vue";
import {Area} from "@antv/g2plot";
import CategoryInfo from "@/components/customs/category-info/index.vue";

const R1Chart = ref();
const R1Info = [
  {
    title: "当日车流量",
    key: "drcll"
  },
  {
    title: "当前车辆数",
    key: "dccls"
  },
];
const handleChart = (res, name) => {
  let arr = [];
  for (const dataKey in res.data) {
    let item = res.data[dataKey];
    arr.push({
      time: dataKey,
      value: item,
      country: name[0]
    });
  }
  for (const dataKey in res.xw) {
    let item = res.xw[dataKey];
    arr.push({
      time: dataKey,
      value: item,
      country: name[1]
    });
  }
  return arr;
};

const carChart = reactive({
  chartData: [],
  drcll: 0,
  dccls: 0
});
let chartInstance = null;

const createChartR1 = async (el, data) => {
  if (chartInstance) {
    chartInstance?.destroy();
  }
  chartInstance = new Area(el, {
    padding: [10, 10, 30, 30],
    forceFit: true,
    smooth: true,
    color: ["#B0F5F5", "#72ABF1"],
    data,
    xField: "time",
    yField: "value",
    tooltip: {showMarkers: false},
    autoFit: true,
    legend: {
      title: {
        style: {
          fill: "#fff"
        },
      },
      position: "top-right",
      visible: false,
    },
    xAxis: {
      tickLine: null,
      line: {
        style: {
          stroke: "#B7FFFF",
        },
      },
      label: {
        style: {
          fill: "#B7FFFF",
        },
      },
    },
    yAxis: {
      grid: {
        line: {
          style: {
            stroke: "#ffffff20",
            lineDash: [5, 10],
          },
        },
      },
      label: {
        style: {
          fill: "#B7FFFF",
        },
      },
    },
    responsive: true,
    seriesField: "country",
  });
  chartInstance.render();
};

const getCarChart = async () => {

  const api = new CarChartApi();
  await api.send();
  const {data, xw, drcll, dccls} = await api.getDatas();
  carChart.dccls = dccls;
  carChart.drcll = drcll;
  let arr = handleChart({data, xw}, ["登记车辆", "临时车辆"]);
  carChart.chartData = arr;

};
onMounted(() => {
  getCarChart();
});
</script>

<style scoped>
.chart {
  flex: 1;
}
</style>
